

<template>
  <Suspense>
    <template #default>
      <AsyncCom></AsyncCom>
    </template>
    <template #fallback>
      <h3>loading.................</h3>
    </template>
  </Suspense>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from "vue";
// defineAsyncComponent方法用来定义异步组件，它接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。
// 直接最简单的用法：
const AsyncCom = defineAsyncComponent(() => import('./01.setup.vue'))
//import返回值就是一个promise
// 为了模拟组件一直没加载好的效果，写了一个延时器
const AsyncCom = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    setTimeout(async () => {
      let com: any = await import('./01.setup.vue')
      resolve(com)
    }, 2000)
  })
}
)
</script>
<style scoped>
</style>
